<template>
	<div style="margin:16px auto; max-width: 1080px; padding: 0 12px;">
		<a-card title="用户管理">
			<template #extra>
				<a-space>
					<a-input v-model:value="q" placeholder="用户名/昵称/邮箱" style="width: 280px" />
					<a-button type="primary" @click="load(1)">查询</a-button>
				</a-space>
			</template>
			<a-table :data-source="rows" :columns="columns" row-key="id" :pagination="false">
				<template #bodyCell="{ column, record }">
					<template v-if="column.key==='actions'">
						<a @click="goBindRoles(record.id)">分配角色</a>
					</template>
				</template>
			</a-table>
			<div style="display:flex; justify-content:flex-end; margin-top: 12px;">
				<a-pagination :current="pageNo" :page-size="pageSize" :total="total" @change="load" />
			</div>
		</a-card>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { pageUsers, type UserBrief } from '@/api/admin/modules/system'

const router = useRouter()
const q = ref('')
const pageNo = ref(1)
const pageSize = ref(10)
const total = ref(0)
const rows = ref<UserBrief[]>([])

const columns = computed(() => [
	{ title: 'ID', dataIndex: 'id' },
	{ title: '用户名', dataIndex: 'username' },
	{ title: '昵称', dataIndex: 'nickname' },
	{ title: '邮箱', dataIndex: 'email' },
	{ title: '状态', dataIndex: 'status', customRender: ({ text }: any) => (text === 1 ? '启用' : '禁用') },
	{ title: '创建时间', dataIndex: 'createTime' },
	{ title: '操作', key: 'actions' }
])

async function load(p?: number) {
	if (p) pageNo.value = p
	const resp = await pageUsers(q.value || undefined, pageNo.value, pageSize.value)
	if ((resp as any).code === 0) {
		total.value = (resp as any).data.total
		rows.value = (resp as any).data.records
	}
}

function goBindRoles(userId: number) {
	router.push({ path: '/admin/user-roles', query: { userId: String(userId) } })
}

load()
</script>





